<template>
	<div class="wrap">
		<div class="tab-panel clear">
			<p class="tab-item" @click="tab(1)" :class="searchData.status==1?'selected-item':''">待使用({{count1}})</p>
			<p class="tab-item" @click="tab(2)" :class="searchData.status==2?'selected-item':''">已使用({{count2}})</p>
			<p class="tab-item" @click="tab(3)" :class="searchData.status==3?'selected-item':''">已过期({{count3}})</p>
		</div>
		<p v-if="loading" class="loading">加载中...</p>
		<template v-if="!loading&&list.length">
			<div class="coupon-list">
				<div class="coupon-list-inner clear">
					<div class="coupon clear" v-for="(item,index) in list" :class="'coupon-bg'+item.type">
						<div class="coupon-title flex flex-align-center flex-justify-center">
							<p  v-if="item.monthcard==1||item.discountTicketType==1" class="p1">兑换券</p>
							<div v-else>
								<p class="p1">{{item.discountTicketPrice/100}}元</p>
								<p class="p2">{{item.discountTicketType==2?'抵用券':item.discountTicketType==3?'满减券':'其他'}}</p>
							</div>
							
						</div>
						<div class="coupon-content">
							<p :title="item.discountTicketName" class="coupon-name text-overflow-hidden">{{item.discountTicketName}}</p>
							<p class="coupon-date">有效期至：{{item.endTime}}</p>
							<div class="coupon-bottom flex flex-justify-between" style="align-items: flex-end;">
								<p class="use-btn" v-if="searchData.status==1&&item.discountTicketName=='乐会员月卡'&&item.monthcard==1" @click="seeCode(item.orderid)">去使用</p>
								<p class="use-btn" v-else-if="searchData.status==1&&item.link" @click="useCoupon(item.link)">去使用</p>
								<span v-else-if="searchData.status==1&&!item.link"></span>
								<p class="use-btn not-allowd" v-else>去使用</p>
								<p class="coupon-count">X{{item.num||1}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<el-pagination :current-page="this.searchData.pagenow" class="text-center" layout="prev, pager, next" prev-text="上一页" next-text="下一页" @current-change="currentPageChange" :page-size="searchData.shownum" :total="totalCount">
			</el-pagination>
		</template>
		<div class="no-coupon" v-if="!loading&&!list.length">
			<img :src="noCoupon" class="no-coupon-img" />
			<div class="no-coupon-tip">
				<p style="font-size: 18px;line-height: 36px;">空空如也，快去兑换豪礼 !</p>
				<p style="font-size: 16px;">兑换路径：活动公告-
					<a :href="baseUrl+'/channel/notice/notice/listactivity.do'" style="color: #2C8EEA;">日常活动</a>
				</p>
			</div>
		</div>
		<el-dialog title="查看兑换码" top="30vh" :visible.sync="codeVisible" width="380px" center>
			<div class="le-ewm">
				<img class="ewm" :src="code" alt="" id="buyerqrcode">
				<div class="ewm-text">
					手机扫描二维码 <br> 登录
					<strong>企业商机助手</strong> <br> 使用兑换码
				</div>
			</div>
			<div class="code-wrap flex flex-align-center flex-justify-between">
				<input type="text" id="key" :value="key" />
				<el-button data-clipboard-target="#key" v-clipboard size="small" type="text">复制</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { baseUrl,getCookie} from '@/utils/common'
	import noCoupon from '@/assets/images/home/no-coupon.png'
	import clipboard from "@/directive/clipboard/clipboard.js";
	
	export default {
		name: 'Coupon',
		directives: {
			clipboard: clipboard
		},
		data() {
			return {
				noCoupon,

				baseUrl,
				loading: false,
				totalCount: 0,
				code:'',
				key:'',
				codeVisible:false,
				searchData: {
					pagenow: 1,
					shownum: 18,
					status: 1,
				},
				count1: 0,
				count2: 0,
				count3: 0,
				list: [],
			}
		},
		computed: {
			user: function() {
				return this.$store.state.user
			}
		},
		mounted() {
			this.scale=(document.documentElement.clientHeight||document.body.clientHeight)/1000
			this.getCode()
			this.getData()
		},
		methods: {
			getCode(){
	            this.$request.homeNoticeUserProduct()
	                .then(res => {
	                    if(res.code == 0) {
	                        this.code = res.user.partsale_qrcode
	                    } else {
	                        this.msgError(res.msg)
	                    }
	                })
	        },
			tab(index) {
				if(this.searchData.status == index) {
					return
				}
				this.searchData.status = index
				this.search()
			},

			currentPageChange(page) {
				this.searchData.pagenow = page
				this.getData()
			},
			search() {
				this.searchData.pagenow = 1
				this.getData()
			},
			getData() {
				this.loading = true
				this.$request.queryAllCouponList(this.searchData)
					.then(res => {
						if(res.code == 0) {
							var token=getCookie('token')
							var list = res.list || []
							list.forEach((item) => {
								var name = item.discountTicketName
								if(name.indexOf('企业秀') > -1) {
									item.link = '/channel/productmodelinfo/list.do'
									
								} else if(name.indexOf('视频制作') > -1) {
									item.link = '/channel/help/first/vediomake'
								} else if(name.indexOf('视频制作模板1') > -1) {
									item.link = '/channel/product/vediomakemodel/infodiy?modeluid=2f65cda5fe5a4a3c95c7937906591a7f&direction=0'
								} else if(name.indexOf('视频制作模板2') > -1) {
									item.link = '/channel/product/vediomakemodel/infopicmake?modeluid=2f65cda5fe5a4a3c95c7937906591020'
								} else if(name.indexOf('400') > -1) {
									item.link = '/channel/fourhundred/querytellist.do?searchcheap=vip&searchspecialtype=vip'
								} else if(name.indexOf('铃音录制') > -1) {
									item.link = '/channel/ringmakeman/list.do'
								} else if(name.indexOf('铃音内容查询') > -1) {
									item.link = '/channel/producttools/gotools.do'
								} else if(name.indexOf('背景音合成') > -1) {
									item.link = '/channel/producttools/gotools.do'
								} else if(name.indexOf('工具库') > -1) {
									item.link = '/channel/producttools/gotools.do'
								} else if(name.indexOf('小程序') > -1) {
									item.link = '/channel/smallprogram/product/typelist.do'
								} else if(name.indexOf('号码认证') > -1) {
									item.link = '/channel/phoneauthtwo/circle/list.do?version=two'
								} else if(name.indexOf('法务') > -1) {
									item.link = '/channel/lawpro/product/list.do'
								} else if(name.indexOf('乐会员月卡') > -1) {
									item.link = '/channel/product/leclub/intro'
								} else if(name.indexOf('手机靓号抵扣券') > -1) {
									item.link = '/channeltwo/product/dayRecommend/recommendlist'
								} else if(name.indexOf('视频彩铃统付') > -1) {
									item.link = '/channel/order/qwvedio/circle/list?circle_type=1&timetype=2'
								} else if(name.indexOf('移动视频彩铃上传') > -1) {
									item.link = '/channel/order/qwvedio/circle/list?timetype=2'
								} else if(name.indexOf('挂机短信') > -1) {
									item.link = '/static/vue_project/index.html?producttype=hangup&token='+token+'#/groupmanage'
								} else if(name.indexOf('现金红包') > -1) {
									item.link = ''
								} else {
									item.link = '/channel/producttype/prolist.do'
								}
								item.type = 3
								item.endTime = new Date(item.endTime.replace(/-/g, '/')).Format('yyyy-MM-dd')
								//type 1 黄色，2红色，3绿色，4灰色
								if(item.discountTicketType == 2) {
									item.type = 1
								}
								if(item.discountTicketType == 1) {
									item.type = 3
								}
								if(item.discountTicketName == '视频制作抵扣券') {
									item.type = 2
								}
								if(name.indexOf('乐会员月卡') > -1 && item.monthcard == 1) {
									item.type = 2
								}
								if(this.searchData.status != 1) {
									item.type = 4
								}
							})
							this.list = list
							console.log(list)
							this.totalCount = res.page.totalresult
							this.count1 = res.userNum1
							this.count2 = res.userNum2
							this.count3 = res.userNum3
						} else {
							this.msgError(res.msg)
						}
						this.loading = false
					})
			},
			useCoupon(link) {
				location.href = baseUrl + link
			},
			seeCode(orderid) {
				this.$request.queryLeCode({orderid:orderid})
				.then(res=>{
					this.key=''
					if(res.code==0){
						this.key=res.codenum
						this.codeVisible=true
					}
					else{
						this.msgError(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped="" lang="scss">
	.wrap {
		padding: 0 10px;
		.tab-panel {
			height: 62px;
			background: #fff;
			border-bottom: 2px solid #f5f5f5;
			.tab-item {
				width: 100px;
				height: 60px;
				text-align: center;
				float: left;
				margin: 0 19px;
				font-size: 16px;
				color: #333;
				cursor: pointer;
				line-height: 60px;
				box-sizing: content-box;
			}
			.selected-item {
				color: #0088EA;
				border-bottom: 2px solid #0088EA;
				line-height: 60px;
			}
		}
		.loading{
			height: 400px;
			text-align: center;
			line-height: 400px;
			font-size: 16px;
			color: #0088EA;
		}
		.coupon-list {
			padding: 30px 20px 0 20px;
			.coupon-list-inner {
				margin-left: -35px;
				margin-top: -20px;
				width: 960px;
				height: 450px;
				overflow: auto;
				.coupon {
					width: 280px;
					height: 85px;
					margin-left: 35px;
					margin-top: 20px;
					float: left;
					background-size: 100%;
					.coupon-title {
						float: left;
						width: 100px;
						height: 100%;
						color: #fff;
						font-weight: bold;
						.p1 {
							font-size: 22px;
						}
						.p2 {
							font-size: 18px;
						}
					}
					.coupon-content {
						width: 168px;
						float: left;
						text-align: left;
						margin-left: 9px;
						padding: 4px 0;
						.coupon-title {
							color: #555;
							font-size: 16px;
						}
						.coupon-date {
							color: #555;
							font-size: 12px;
							line-height: 18px;
						}
						.coupon-bottom {
							width: 150px;
							margin-top: 6px;
						}
						.use-btn {
							width: 70px;
							height: 28px;
							border-width: 1px;
							border-style: solid;
							border-radius: 2px;
							text-align: center;
							line-height: 26px;
							font-size: 12px;
							cursor: pointer;
						}
						.coupon-count {
							font-size: 14px;
							color: #555;
						}
					}
				}
				.coupon-bg1 {
					background-image: url(../../../assets/images/home/coupon_bg1.png);
					.use-btn {
						border-color: #F39800;
						color: #F39800;
					}
				}
				.coupon-bg2 {
					background-image: url(../../../assets/images/home/coupon_bg2.png);
					.use-btn {
						border-color: #E65757;
						color: #E65757;
					}
				}
				.coupon-bg3 {
					background-image: url(../../../assets/images/home/coupon_bg3.png);
					.use-btn {
						border-color: #31C8AB;
						color: #31C8AB;
					}
				}
				.coupon-bg4 {
					background-image: url(../../../assets/images/home/coupon_bg4.png);
					.use-btn {
						border-color: #999;
						color: #999;
					}
				}
			}
		}
		.no-coupon {
			padding-top: 54px;
			.no-coupon-img {
				width: 360px;
				height: auto;
				display: block;
				margin: 0 auto;
			}
			.no-coupon-tip {
				margin-top: 20px;
				color: #666;
				text-align: center;
			}
		}
		.le-ewm {
			display: flex;
			.ewm {
				width: 120px;
				height: 120px;
			}
			.ewm-text {
				font-size: 14px;
				margin: auto 0;
				margin-left: 17px;
			}
		}
		.code-wrap{
			height: 44px;
		    line-height: 44px;
		    padding: 0 19px 0 12px;
		    border: 1px solid #ddd;
		    border-radius: 2px;
		    width: 312px;
		    margin-top: 24px;
		    .key-input{
		    	border: none;
		    }
		}
	}
</style>